
<template>
  <div class="app-container">
      <el-row>
          <el-card :body-style="{padding:'10px'}">
              <div class="tabs">
                  <div class="tab-item"  :class="{actived:index===activedIndex}" v-for="(val,index) in tabs" :key="index" @click="changeTab(index)">{{val}}</div>
              </div>
          </el-card>
      </el-row>

      <el-row :style="{marginTop:'20px'}">
          <el-card :body-style="{padding:'10px'}">
               <el-form  label-position="left" label-width="68px" class="search-form-statistic">
                   <el-row >
                        <el-col :span="6">
                            <el-form-item label="标题" style="margin-bottom: 0!important;">
                                <el-input class="filter-item" placeholder="请输入标题" v-model.trim="bigtitle" clearable></el-input>
                            </el-form-item>
                        </el-col>
                   </el-row>
<!--                   <template v-if="activedIndex!=2">-->
<!--                        <el-row >-->
<!--                            <el-col :span="6">-->
<!--                                <el-form-item label="组织机构" style="margin-bottom: 0!important;">-->
<!--                                    <el-input class="filter-item" placeholder="请选择组织机构" v-model="deptId"></el-input>-->
<!--                                </el-form-item>-->
<!--                            </el-col> -->
<!--                            <el-col :span="6">-->
<!--                                <el-form-item label="账户名" style="margin-bottom: 0!important;">-->
<!--                                    <el-input class="filter-item" placeholder="请输入账户名" v-model.trim="acountName"></el-input>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                   </template>-->

                    <!-- <el-row >
                        <el-col :span="24">
                            <el-form-item label="审核状态" style="margin-bottom: 0!important;">
                               <el-radio-group v-model="checkType">
                                    <el-radio :label="1" >全部</el-radio>
                                    <el-radio :label="2" >未审核</el-radio>
                                    <el-radio :label="3" >已审核</el-radio>
                                    <el-radio :label="4" >已上线</el-radio>
                                    <el-radio :label="5" >已撤回</el-radio>
                                    <el-radio :label="6" >已失效</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                   </el-row> -->
                   <el-row >
                        <el-col :span="24">
                            <el-form-item label="推送方式" style="margin-bottom: 0!important;">
                               <el-radio-group v-model="pushType">
                                    <el-radio label="" >全部</el-radio>
                                    <el-radio :label="1" >全员推送</el-radio>
                                    <el-radio :label="2" >不推送</el-radio>
                                    <el-radio :label="3" >按板块推送</el-radio>
                                    <el-radio :label="4" >按个股推送</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                   </el-row>
                   <el-row >
                        <el-col :span="24">
                            <el-form-item label="异动新闻" style="margin-bottom: 0!important;">
                               <el-radio-group v-model="changeNewsType">
                                    <el-radio label="" >全部</el-radio>
                                    <el-radio :label="1" >银小河浮窗</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                   </el-row>
                   <el-row >
                       <template v-if="activedIndex===0">
                            <el-col :span="6">
                                <el-form-item label="作者" style="margin-bottom: 0!important;">
                                    <el-input class="filter-item" placeholder="请输入作者" v-model.trim="authorName"></el-input>
                                </el-form-item>
                            </el-col>
                       </template>
                       <template v-else-if="activedIndex===1">
                            <el-col :span="6">
                                <el-form-item label="来源" style="margin-bottom: 0!important;">
                                    <el-input class="filter-item" placeholder="请输入来源" v-model.trim="resourceFrom"></el-input>
                                </el-form-item>
                            </el-col>
                       </template>
                   </el-row>
                    <!-- <el-row >
                        <el-col :span="6">
                            <el-form-item label="来源" style="margin-bottom: 0!important;">
                                <el-input class="filter-item" placeholder="请输入来源" v-model.trim="resourceFrom"></el-input>
                            </el-form-item>
                        </el-col>
                   </el-row> -->
                    <el-row :gutter="40">
                        <el-col :span="20">
                            <el-form-item label="统计区间" style="margin-bottom: 0!important;">
                               <el-radio-group v-model="countRangeType">
                                    <!-- <el-radio :label="1" >今日</el-radio> -->
                                    <el-radio :label="1" >昨日</el-radio>
                                    <el-radio :label="2" >本周</el-radio>
                                    <el-radio :label="3" >上周</el-radio>
                                    <el-radio :label="4" >本月</el-radio>
                                    <el-radio :label="5" >上月</el-radio>
                                    <el-radio :label="6" >自定义&nbsp;
                                        <el-date-picker
                                        v-model="timeRange"
                                        value-format="yyyy-MM-dd"
                                        :disabled="countRangeType!==6"
                                        type="daterange"
                                        range-separator="~"
                                        :picker-options="pickerOptions"
                                        start-placeholder="开始日期"
                                        :clearable="false"
                                        end-placeholder="结束日期">
                                        </el-date-picker>
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                           <el-button
                                class="filter-item" type="primary"  @click.native="search"
                            >
                               查询
                            </el-button>
                       </el-col>
                        <el-col :span="2">
                           <el-button
                                class="filter-item"   @click.native="resetSearch"
                            >
                               重置
                            </el-button>
                       </el-col>
                   </el-row>
               </el-form>
          </el-card>
      </el-row>
      <el-row :style="{marginTop:'20px'}" >
          <el-card :body-style="{padding:'10px'}">
               <div class="card-body has-border">
                    <el-table stripe
                      :data="tableData" v-loading="listLoading" element-loading-text="加载中..."
                      border
                      fit
                      style="width: 100%"
                      id="out-table"
                    >
                        <el-table-column align="center" label="标题"  prop="title"></el-table-column>
                        <template v-if="activedIndex!=0">
                              <el-table-column align="center" label="发布时间"  prop="publishTime" width="160"></el-table-column>
                        </template>
                        <el-table-column align="center" label="更新时间"  prop="updateTime" width="160"></el-table-column>
                        <el-table-column align="center" label="所属栏目" prop="source"  width="120"></el-table-column>
                        <el-table-column align="center" label="审核状态"  width="120">
                          <template slot-scope="scope">
                            <el-tag size="small" :type="formatClass(scope.row.dataStatus)">{{formatStatu(scope.row.dataStatus)}}</el-tag>
                          </template>
                        </el-table-column>

                        <el-table-column align="center" label="驳回原因"  prop="auditRejectMessage"></el-table-column>
                        <el-table-column align="center" label="审核人" prop="updaterName"  width="120"></el-table-column>
                        <el-table-column align="center" :label="(activedIndex===0?'作者':'来源')" paop="author" width="120">
                          <template slot-scope="scope">
                            <span v-if="activedIndex===0">{{scope.row.author}}</span>
                            <span v-else>{{scope.row.source}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="center" label="推送方式"  width="120">
                            <template slot-scope="scope">
                                <span>{{scope.row.sendChannel}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="UV" prop="uv"  width="120"></el-table-column>
                        <el-table-column align="center" label="PV"  prop="pv" width="120"></el-table-column>
                    </el-table>
                        <div class="pagination-container">
                        <el-pagination
                            background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="listQuery.pageNum"
                            :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                        >
                        </el-pagination>
                    </div>
               </div>
          </el-card>
      </el-row>
  </div>
</template>

<script>
/**
 *  资讯热榜
 */
import moment from 'moment';


import {
    getOriginalist,
    getIntellectlist,
    getRobotlist
    } from '@/api/newsHotop'

moment.locale('zh-cn')



export default {
    name:'newsHotop',
    data(){
        return{
            tabs:['原创资讯','智能资讯','机器写稿'],
            activedIndex:0,
            bigtitle:'',
            deptId:'',
            acountName:'',
            checkType:1,
            pushType:'',
            changeNewsType:'',
            authorName:'',
            resourceFrom:'',
            countRangeType:1,
            timeRange:[],
            copy_timeRange:[],
            listQuery:{
                pageSize:12,
                pageNum:1
            },
            total:null,
            tableData:[],
            listLoading:false,
            originTableData:[],
            intellectTableData:[],
            robotTableData:[],
            pickerOptions:{
                disabledDate:(time)=>{
                    return time.getTime() >Date.now() || time.getTime() === Date.now() ||time.getTime()< new Date().setFullYear((new Date().getFullYear() - 1))
                }
            }
        }
    },
    methods:{
        changeTab(index){
            this.activedIndex = index;
            this.search()
        },
        handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.search()
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val
            this.search()
        },
        // 获取原创资讯的数据
        getOriginalSearchList(params){
             this.listLoading = true;
            getOriginalist(params).then(res=>{
                this.tableData = Array.isArray(res.Data)?res.Data:[];
                this.listLoading = false;
                this.total = parseInt(res.PageInfo.Total||0);
            }).catch(err=>{
                this.listLoading = false;
            })
        },
        // 获取智能资讯的数据
        getIntellectSearchList(params){
            this.listLoading = true;
            getIntellectlist(params).then(res=>{
                this.tableData = Array.isArray(res.Data)?res.Data:[];
                this.total = parseInt(res.PageInfo.Total||0);
                this.listLoading = false;
            }).catch(err=>{
                this.listLoading = false;
            })
        },
        // 获取机器写稿的数据
        getRobotSearchList(params){
             this.listLoading = true;
            getRobotlist(params).then(res=>{
                this.tableData = Array.isArray(res.Data)?res.Data:[];
                this.listLoading = false;
                this.total = parseInt(res.PageInfo.Total||0);
            }).catch(err=>{
                this.listLoading = false;
            })
        },
        search(){
            let that = this;
          let start = new Date(that.timeRange[0]);
          start = moment(start.getTime()).format('YYYY-MM-DD');
          let end = new Date(that.timeRange[1]);
          end = moment(end.getTime()).format('YYYY-MM-DD');
            const params = {
                title:this.bigtitle,
                sendchannel:this.pushType,
                scene:this.changeNewsType,
                startDate: new Date(start+' 00:00:00'),
                endDate:new Date(end +' 23:59:59'),
                pageNum:this.listQuery.pageNum,
                pageSize:this.listQuery.pageSize,
                period:this.countRangeType,

                // deptId:this.deptId,
                // acountName:this.acountName,
                // checkType:this.checkType,
                // authorName:this.authorName,
                // resourceFrom:this.resourceFrom,

            }

            let currenTabIndex = this.activedIndex;
            if(currenTabIndex===0){
                params.org = this.deptId;
                // params.account = this.acountName;
                params.author = this.authorName;

                this.getOriginalSearchList(params);
            }else if(currenTabIndex===1){
                params.org = this.deptId;
                // params.account = this.acountName;
                params.source = this.resourceFrom
                this.getIntellectSearchList(params);
            }else{
                this.getRobotSearchList(params);
            }
        },
        resetSearch(){
            this.bigtitle='';
            this.deptId='';
            this.acountName='';
            this.checkType='';
            this.pushType='';
            this.changeNewsType='';
            this.authorName='';
            this.resourceFrom='';
            this.countRangeType=1;
            this.timeRange=[...this.copy_timeRange];
            this.search();
        },
      formatStatu(data) {
        switch (data) {
          case 0:
            return "未审核";
          case 1:
            return "已审核";
          case 2:
            return "已上线";
          case 3:
            return "已撤回";
          case 4:
            return "已驳回";
          case 5:
            return "未发布";
          case 6:
            return "已失效";
        }
      },
      formatClass(data) {
        switch (data) {
          case 0:
            return "danger"; // '未审核'
          case 1:
            return "success"; // '已审核'
          case 2:
            return "primary"; // '已上线'
          case 3:
            return "warning"; // '已撤回'
          case 4:
            return "warning"; // '已驳回'
          case 5:
            return "warning"; // '未发布'
          case 6:
            return "info"; // '已失效'
        }
      },
        // 获取 今日、昨日、本周、上周、本月、上月的时间
        getTypeDate(type=1){
            let date = null;
            switch(type){
                // case 1:
                //     date = moment().format('YYYY-MM-DD');
                //     date = [date,date]
                //     break;
                case 1:
                     date = moment().subtract(1,'day').format('YYYY-MM-DD');
                     date = [date,date]
                    break;
                case 2:
                    date = moment().startOf('week');
                    date = [date.format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
                    break;
                case 3:
                     date = moment().subtract(1,'week').startOf('week')
                     date = [date.format('YYYY-MM-DD'),date.endOf('week').format('YYYY-MM-DD')]
                    break;
                case 4:
                     date = moment().startOf('month');
                     date = [date.format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
                    break;
                case 5:
                    date = moment().subtract(1,'month').startOf('month')
                    date = [date.format('YYYY-MM-DD'),date.endOf('month').format('YYYY-MM-DD')]
                    break;
                default:
                    date = moment().format('YYYY-MM-DD')
                    date = [date,date]
            }
            return date;
        }
    },
    filters:{
        filetrSendChannel(val){
            let textName = '';
            switch(val){
                case '1':
                    textName = '全员推送';
                    break;
                case '2':
                    textName = '不推送';
                    break;
                case '3':
                    textName = '按板块推送';
                    break;
                case '4':
                    textName="按个股推送";
                    break;
                default:
                    textName = ''

            }
            return textName;
        }
    },
    created(){
        const tempDataRange = this.getTypeDate(1);
        this.timeRange = [...tempDataRange];
        this.copy_timeRange = [...tempDataRange];
        this.search();
    },
    watch:{
        'countRangeType'(val){
            this.timeRange = this.getTypeDate(val);
        }
    }
}
</script>

<style lang="stylus">

.tabs, .sub-tabs{
  display flex
  justify-content flex-start
  align-items center
  line-height 25px
  font-size 14px

  .tab-item{
    padding 0 15px
    border-top 1px solid #ddd
    border-left  1px solid #ddd
    border-bottom  1px solid #ddd
    cursor pointer
    &:last-child{
      border-right  1px solid #ddd
    }
    &.actived{
      color #0099CC
    }
  }
}

.has-border{
    .el-table thead th {
        border 1px solid #ebeef5 !important
    }
}
.search-form-statistic .el-row{
  margin-bottom  10px !important
}
.search-form-statistic .el-row:last-child{
    margin-bottom  0!important
}
.search-form-statistic .el-radio{
    margin-right 10px
}
</style>
